<template>
  <div class="dashboard-editor-container main" >
    <div class="fun">
      <el-button @click="test">返回地图详情</el-button>
      <el-button @click="addP">添加点</el-button>
      <el-button @click="getPointList">获取点信息</el-button>
      <el-button @click="setMapBasic">配置地图基础信息</el-button>
      <el-button @click="setCenterZoom">修改中心点及缩放级别</el-button>
      <el-button @click="clearOverlay">清除覆盖物</el-button>
    </div>
    <oce-map ref="map" class="map"></oce-map>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pList: [
        {
          coordinateType: 1,
          lat: 21.671493,
          lng: 110.980331,
          pointId: 1604645613409
        }
      ]
    }
  },
  methods: {
    clearOverlay() {
      this.$refs.map.clearOverlay()
    },
    setCenterZoom() {
      this.$refs.map.setCenterZoom({
        zoom: 11,
        center: {
          lat: 45.96165442766635,
          lng: 127.039901293991,
          coordinateType: 3,
          pointId: 1604735684313
        }
      })
    },
    setMapBasic() {
      this.$refs.map.setMapBasic({
        mapType: 2,
        singlePoint: false
      })
    },
    async getPointList() {
      let info = await this.$refs.map.getPointList()
      console.log(info)
    },
    test() {
      let info = this.$refs.map.getMapInfo()
      console.log(info)
    },
    addP() {
      this.$refs.map.addPoint(this.pList)
    }
  }
}
</script>

<style lang="scss" scoped>
.main{
  width: 100%;
  height: 100%;

  .fun{
    height: 60px;
    line-height: 60px;
  }

  .map{
    height: calc(100% - 60px);
  }
}
</style>
